﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/mui.min.css">
    <link href="https://cdn.bootcss.com/amazeui/2.7.2/css/amazeui.css" rel="stylesheet" />
    <link href="css/common.css" rel="stylesheet" />
    <style>
        body {
            background: #f3f3f3;
        }

        .me_01 {
            background: #23c788;
            overflow: hidden;
            width: 100%;
            padding: 8% 0;
            position: relative;
        }

        .me1_i1 {
            border-radius: 50%;
            width: 20%;
            border: 2px solid #f4f5f9;
            display: block;
            margin: 0 auto;
            margin-bottom: 2%;
        }

        .me1_s1 {
            display: block;
            text-align: center;
            color: #F4F5F9;
            font-size: 1.8rem;
            margin-bottom: 1%;
        }

        .me1_s2 {
            font-size: 1.5rem;
            color: #f4f5f9;
            text-align: center;
            display: block;
        }

        .me1_d1 {
            border-radius: 30px;
            width: 35%;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.8);
            padding: 1.5% 0;
            border: 2px solid #0cc076;
            position: absolute;
            top: 15%;
            right: -8%;
        }

        .me1_i2 {
            display: block;
            float: left;
            width: 15%;
            margin-left: 7%;
            margin-right: 5%;
        }

        .me1_s3 {
            display: block;
            float: left;
            color: #23c788;
            font-size: 1.4rem;
        }

        .me_02 {
            width: 100%;
            overflow: hidden;
            padding: 4.5% 0;
            background: #fff;
            margin-bottom: 2%;
        }

        .me2_s1 {
            display: block;
            float: left;
            width: 50%;
            font-size: 1.5rem;
            text-align: center;
        }

        .mui-table-view-cell:after {
            height: 0;
        }

        .me3_i1 {
            width: 8%;
            display: block;
            float: left;
            margin-right: 5%;
            margin-top: 1.5%;
        }

        .me3_s1 {
            font-size: 1.6rem;
            margin-top: 3%;
            display: block;
        }

        .vult_04 {
            position: fixed;
            width: 100%;
            z-index: 9999999;
            border-top: 1px solid #d3d3d3;
            background: #ffffff;
            bottom: 0;
            height: 6rem;
        }

        .vult4_i1 {
            display: block;
            width: 0.1rem;
            float: left;
        }

        .vult4_d1 {
            width: 49%;
            float: left;
            margin-right: 1%;
        }

        .vult4_d2 {
            width: 49%;
            float: right;
        }

        .vult4_i2 {
            width: 14%;
            margin: 0 auto;
            display: block;
            margin-top: 2%;
        }

        .vult4_i3 {
            width: 12%;
            margin: 0 auto;
            display: block;
            margin-top: 2%;
        }

        .vult4_s1 {
            color: #0bc886;
            font-size: 1.6rem;
            display: block;
            text-align: center;
            margin-top: 3%;
        }
    </style>
</head>
<body>
    <div id="user" v-cloak style="margin-bottom:49px;">
        <div class="me_01" id="me_01">
            <img v-bind:src="userinfo.headImg!=null?userinfo.headImg:'images/nouserfaceimg.png'" alt="" class="me1_i1">
            <span class="me1_s1">{{userinfo.nickName!=null?userinfo.nickName:'暂无昵称'}}</span>
            <span class="me1_s2">{{userinfo.province}}{{userinfo.city}}</span>
            <a class="me1_d1" href="edituser.html">
                <img src="images/me01.png" alt="" class="me1_i2">
                <span class="me1_s3">编辑资料</span>
            </a>
        </div>
        <!--<div class="me_02">
            <span class="me2_s1"><span style="color: #505050;margin-right: 3%">积分</span>{{userinfo.Balance}}</span>
            <span class="me2_s1"><span style="color: #505050;margin-right: 3%">余额</span>{{userinfo.integral}}</span>
        </div>-->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" href="orderlist.html">
                    <img src="images/me02.png" alt="" class="me3_i1">
                    <span class="me3_s1">我的订单</span>
                </a>
            </li>
            <!--<li class="mui-table-view-cell">
                <a class="mui-navigate-right" href="TicketList.html">
                    <img src="images/me02.png" alt="" class="me3_i1">
                    <span class="me3_s1">我的人次票订单</span>
                </a>
            </li>-->
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" href="MyTicketList.html">
                    <img src="images/me02.png" alt="" class="me3_i1">
                    <span class="me3_s1">我的人次票</span>
                </a>
            </li>
            <li style="padding: 1% 0;width: 100%;overflow: hidden;background: #f3f3f3"></li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" href="vipcard.html">
                    <img src="images/huiyuanka.png" alt="" class="me3_i1">
                    <span class="me3_s1">会员</span>
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" href="venuevipcard.html">
                    <img src="images/huiyuanka.png" alt="" class="me3_i1">
                    <span class="me3_s1">会员卡</span>
                </a>
            </li>
            <li style="padding: 1% 0;width: 100%;overflow: hidden;background: #f3f3f3"></li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" v-bind:href="coachurl">
                    <img src="images/jiamengjiaolian.png" alt="" class="me3_i1">
                    <span class="me3_s1">{{userinfo.coach==null?"加盟教练":userinfo.coach.State==1?"教练中心":"加盟教练待审核"}}  </span>
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" href="JoinReferee.html">
                    <img src="images/jiamengcaipan.png" alt="" class="me3_i1">
                    <span class="me3_s1">加盟裁判</span>
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" href="JoinVol.html">
                    <img src="images/me03.png" alt="" class="me3_i1">
                    <span class="me3_s1">加盟志愿者</span>
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" href="aboutus.html">
                    <img src="images/me03.png" alt="" class="me3_i1">
                    <span class="me3_s1">关于我们</span>
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" href="contactus.html">
                    <img src="images/me04.png" alt="" class="me3_i1">
                    <span class="me3_s1">联系我们</span>
                </a>
            </li>
            <li style="padding: 1% 0;width: 100%;overflow: hidden;background: #f3f3f3"></li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right" href="feedback.html">
                    <img src="images/me05.png" alt="" class="me3_i1">
                    <span class="me3_s1">意见反馈</span>
                </a>
            </li>

        </ul>
    </div>
    <div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default am-no-layout bottomdiv" style="border-top:1px solid #dedede">
        <ul class="am-navbar-nav am-cf am-avg-sm-4" style="background-color: #ffffff;">
            <li>
                <a href="index.html" class="" style="color: #757575">
                    <span class="fa  am-icon-home  am-icon-sm"></span>
                    <span class="am-navbar-label">首页</span>
                </a>
            </li>
            <li>
                <a href="venue.html" class="" style="color: #757575">
                    <span class="fa fa-futbol-o am-icon-sm"></span>
                    <span class="am-navbar-label">找场地</span>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)" class="" style="color: #0BC886; ">
                    <span class="fa fa-user am-icon-sm"></span>
                    <span class="am-navbar-label">我的</span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/common.js"></script>
<script src="js/vue.js"></script>
<script src="js/mui.min.js"></script>
<script src="https://use.fontawesome.com/ca6b609d64.js"></script>
<script src="js/zishiying.js"></script>
<script>
    var page=new Vue({
        el:'#user',
        data:{
            userinfo: [],
            coachurl: "JoinCoach.html",
            Refereeurl: "JoinReferee.html",
            Volunteerurl: "JoinVolunteer.html",
        },
        methods:{
            getUserInfo:function () {
                var that=this;
                $.ajax({
                    type: 'POST',
                    url: apiUrl+'/Api/Mine/GetMyInfo',
                    success: function (data) {
                        console.log(data);
                        if(data.errcode==0){
                            that.userinfo = data.data;
                            that.coachurl = that.userinfo.coach == null ? "JoinCoach.html" : that.userinfo.coach.State == 1 ? "usercentercoach.html" : "javascript:alert('您申请加盟，请等待审核')";
                            console.log(that.userinfo.coach)
                        } else {

                        }
                    },
                    //error:function () {
                    //    alert("服务器加载异常");
                    //}
                })
            }
        }
    });
    $(function () {
        page.getUserInfo();
    })
</script>
